<template>
    <view :style="{ '--color': color }" class="Moneyall">
        <navBar title="充值"></navBar>
        <view class="money">
            <text class="color_33 size28">充值金额</text>
            <view class="moneyNum">
                <text class="black size50">￥</text>
                <input type="digit" class="MoneyVal" v-model="inputNum" placeholder="请输入充值金额" placeholder-class="place" @focus="flagTip = false" @blur="Blur" @input="Input" />
            </view>
            <view class="TipShow">
                <view class="Tips color_ff4" v-if="flagTip">{{ Tips }}</view>
                <view class="color_99 size26">{{ desc }}</view>
            </view>
        </view>

        <view class="content">
            <view class="Topup_activity">
                <text class="black size32">选择充值金额</text>
                <view class="Topup_activity_box">
                    <view class="activity_list" @click="changeActive(item)" :class="{ Active: activitysId == item.id }" v-for="item in activitys" :key="item.id">
                        <text class="money_val">￥{{ item.limit }}</text>
                        <text class="explain ellipsis_3">{{ item.desc }}</text>
                    </view>
                </view>
            </view>

            <view class="Instructions" v-if="purse.recharge_rule">
                <text class="black size32">余额说明</text>
                <view class="rows m-top30">
                    <u-parse :content="purse.recharge_rule" :domain="imgUrl"></u-parse>
                </view>
            </view>
        </view>

        <view class="topUp">
            <view class="topUp_btn" @click="submits">立即充值</view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import Api from '@/common/Api.js';
    export default {
        data() {
            return {
                imgUrl: this.imgUrl,
                purse: '',
                activitys: [],
                activitysId: '',
                Shut: 0, // 闭合

                inputNum: '',
                RechargeData: '',
                flagTip: false,
                desc: '',
                timer: null,
                Tips: '请输入充值金额'
            };
        },

        onShow() {
            this.myMoney();
            let options = wx.getEnterOptionsSync();
            if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3' && this.Shut == 1) {
                let extraData = options.referrerInfo.extraData;
                if (!extraData) return;
                if (extraData.code == 'success') this.$Toast('充值成功');
            }
        },

        methods: {
            async myMoney() {
                const result = await Api.myMoney();
                this.purse = result;
                this.activitys = result.activitys || [];
                // if (!this.activitys.length) return
                // this.activitysId = this.activitys[0].id
                // this.inputNum = this.activitys[0].limit
                this.getRechargeAct();
            },

            async submits() {
                this.$showLoading('');
                const result = await Api.recharge(this.inputNum, this.RechargeData.aesId, this.RechargeData.aesVerifyCode);
                this.$hideLoading();
                if (result.extraData) {
                    this.Shut = 1;
                    wx.openEmbeddedMiniProgram({
                        appId: result.appId,
                        extraData: result.extraData
                    });
                    return;
                }
                const Payment = await this.$pop.getPayment(result);
                if (Payment) this.myMoney();
            },

            getRechargeAct() {
                //获取当前充值金额能有的优惠
                this.$http
                    .post({
                        url: '/SRA_memberRecharge/getRechargeAct',
                        data: {
                            VeriCode: this.bid,
                            vId: this.vid,
                            money: this.inputNum
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.notice);
                        const result = res.data;
                        this.RechargeData = result;
                        this.desc = result.desc ?? '';
                    });
            },

            changeActive(item) {
                this.activitysId = item.id;
                this.inputNum = item.limit;
                this.flagTip = false;
                this.getRechargeAct();
            },

            Blur(event) {
                const value = event.detail.value;
                const reg = /(\d*\.\d{2})\d*/;
                if (!value) {
                    this.flagTip = true;
                    this.Tips = '请输入充值金额';
                    return;
                }
            },

            // Input() {
            // 	let value = this.inputNum
            // 	this.$nextTick(() => {
            // 		this.inputNum = this.inputNum.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')
            // 	})
            // 	console.log(this.inputNum);
            // },
            Input(event) {
                const Val = event.detail.value;
                if (this.timer) clearTimeout(this.timer);
                if (!Val) return (this.desc = '');
                if (this.activitys.length) this.contrast();
                this.timer = setTimeout(() => {
                    this.getRechargeAct();
                    this.timer = null;
                }, 800);
            },

            contrast() {
                const Value = this.activitys.findIndex((item) => item.limit == this.inputNum);
                if (Value == -1) return (this.activitysId = '');
                this.activitysId = this.activitys[Value].id;
            }
        },
        computed: {
            ...mapState(['vid', 'color', 'bid', 'share'])
        },
        onUnload() {
            this.Shut = 0;
        },
        onShareAppMessage(option) {
            return {
                title: this.share.title,
                desc: this.share.desc,
                path: '/pages/index/index?share_v_id=' + this.vid,
                imageUrl: this.share.imageUrl
            };
        }
    };
</script>

<style scoped lang="scss">
    .Moneyall {
        width: 100%;
        padding-bottom: 160rpx;
    }

    .money {
        width: 100%;
        padding: 50rpx 50rpx 30rpx 50rpx;
        border-bottom: 1rpx solid #f2f2f2;
    }

    .moneyNum {
        width: 100%;
        height: 100rpx;
        display: flex;
        align-items: center;
        margin-top: 20rpx;
    }

    .MoneyVal {
        flex: 1;
        height: 100%;
        padding-left: 10rpx;
        font-size: 54rpx;
        color: #000;
    }

    ::v-deep.place {
        color: #ccc;
        font-size: 36rpx;
    }

    .content {
        width: 100%;
        background-color: #ffffff;
        padding: 50rpx;
    }

    .Topup_activity {
        width: 100%;
    }

    .Topup_activity_box {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 40rpx;
        margin-top: 30rpx;
        margin-bottom: 40rpx;
    }

    .activity_list {
        width: 100%;
        height: 220rpx;
        padding: 10rpx;
        border: 1px solid #cccccc;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .money_val {
        color: #000;
        font-size: 52rpx;
    }

    .explain {
        color: var(--color);
        font-size: 26rpx;
        margin-top: 10rpx;
        text-align: center;
    }

    .Active {
        border: 1px solid var(--color) !important;
    }

    .Custom_title {
        color: var(--color);
        font-size: 26rpx;
    }

    .Instructions {
        width: 100%;
        margin-top: 50rpx;
    }

    .topUp {
        width: 100%;
        background-color: #ffffff;
        padding: 20rpx 40rpx 60rpx 40rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 666;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7rpx 29rpx 0px;
    }

    .topUp_btn {
        width: 100%;
        height: 80rpx;
        background-color: var(--color);
        border-radius: 10rpx;
        font-size: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 30rpx;
    }

    .TipShow {
        width: 100%;
        min-height: 50rpx;
        padding-left: 62rpx;
    }

    .Tips {
        font-size: 26rpx;
    }
</style>
